<template>
    <div class="edit-popup">
        <popup
            ref="popupRef"
            :title="popupTitle"
            :async="true"
            width="900px"
            :clickModalClose="true"
            @confirm="handleSubmit"
            @close="handleClose"
        >
            <el-tabs v-model="activeName">
                <el-tab-pane label="基本信息" name="first">
                    <el-form
                        ref="formRef"
                        :model="formData"
                        label-width="110px"
                        :rules="formRules"
                        :inline="true"
                    >
                        <el-form-item label="商标名称" prop="caseName">
                            <el-input v-model="formData.caseName" class="w-[280px]" />
                        </el-form-item>
                        <el-form-item>
                            <div class="flex m-4" style="padding-left: 50px">
                                <div class="mr-4">选择图片：</div>
                                <material-picker v-model="state.value1" />
                            </div>
                        </el-form-item>
                        <el-form-item label="我方文号" prop="ourRef">
                            <el-input
                                v-model="formData.ourRef"
                                class="w-[280px]"
                                placeholder="系统自动生成"
                            />
                        </el-form-item>
                        <el-form-item label="业务类型" prop="businessType">
                            <el-select
                                class="flex-1 w-[280px]"
                                v-model="formData.businessType"
                                placeholder="请选择业务类型"
                            >
                                <el-option label="商标注册申请" value="" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="国家（地区）" prop="designatedCountry">
                            <el-input
                                v-model="formData.designatedCountry"
                                class="w-[280px]"
                                placeholder="请输入申请国家（地区）"
                            />
                        </el-form-item>
                        <el-form-item label="客户文号" prop="customerDocumentNumber">
                            <el-input
                                class="w-[280px]"
                                v-model="formData.customerDocumentNumber"
                                placeholder="请输入客户文号"
                            />
                        </el-form-item>
                        <el-form-item label="案件流向" prop="caseFlow">
                            <el-select
                                class="flex-1 w-[280px]"
                                v-model="formData.caseFlow"
                                placeholder="请选择"
                            >
                                <el-option label="内-内" value="" />
                                <el-option label="外-外" value="" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="案源国" prop="countryOfOrigin">
                            <el-input class="w-[280px]" v-model="formData.countryOfOrigin" />
                        </el-form-item>
                        <el-form-item label="代理机构" prop="agency">
                            <el-input class="w-[280px]" v-model="formData.agency" />
                        </el-form-item>
                        <el-form-item label="申请方式" prop="proposalForm">
                            <el-select
                                class="flex-1 w-[280px]"
                                v-model="formData.isMaterials"
                                placeholder="请选择"
                            >
                                <el-option label="电子申请" value="2" />
                                <el-option label="纸本申请" value="1" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="合同编号" prop="contractNumber">
                            <el-input class="w-[190px]" v-model="formData.contractNumber" />
                            <el-button v-perms="['case:add']" style="margin-left: 20px" type="primary" size="small">
                                选择合同
                            </el-button>
                        </el-form-item>
                        <el-form-item label="代理人" prop="cost">
                            <el-input
                                class="w-[280px]"
                                v-model="formData.cost"
                                placeholder="请输入代理人"
                            />
                        </el-form-item>
                        <el-form-item label="流程人员" prop="hardwareEnvironment">
                            <el-select
                                class="flex-1 w-[280px]"
                                v-model="formData.hardwareEnvironment"
                                placeholder="请选择"
                            >
                                <el-option label="流程01" value="1"></el-option>
                                <el-option label="流程02" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="申请号" prop="softwareEnvironment">
                            <el-input class="w-[280px]" v-model="formData.softwareEnvironment" />
                        </el-form-item>

                        <el-form-item label="成本" prop="functionAndArt">
                            <el-input class="w-[280px]" v-model="formData.vfunctionAndArt" />
                        </el-form-item>
                        <el-form-item label="预算" prop="functionAndArt">
                            <el-input class="w-[280px]" v-model="formData.cfunctionAndArt" />
                        </el-form-item>
                        <el-form-item label="商标类别" prop="budget">
                            <el-select
                                class="flex-1 w-[280px]"
                                v-model="formData.budget"
                                placeholder="请选择"
                            >
                                <el-option label="1" value="1"></el-option>
                                <el-option label="2" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="商标类型" prop="initialPeriod">
                            <el-select
                                class="flex-1 w-[280px]"
                                v-model="formData.initialPeriod"
                                placeholder="请选择"
                            >
                                <el-option label="一般" value="1" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="业务人员" prop="author">
                            <el-select
                                class="flex-1 w-[280px]"
                                v-model="formData.budget"
                                placeholder="请选择"
                            >
                                <el-option label="流程1" value="1"></el-option>
                                <el-option label="递交测试" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="业务助理" prop="author">
                            <el-select
                                class="flex-1 w-[280px]"
                                v-model="formData.budget"
                                placeholder="请选择"
                            >
                                <el-option label="流程1" value="1"></el-option>
                                <el-option label="递交测试" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="颜色形式" prop="isPapernotice">
                            <el-select v-model="formData.isPapernotice" class="w-[280px]" clearable>
                                <el-option label="无" value="1" />
                                <el-option label="指定形式" value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否主案" prop="softwareWorkDescription">
                            <el-select
                                class="flex-1 w-[280px]"
                                v-model="formData.budget"
                                placeholder="请选择"
                            >
                                <el-option label="是" value="1"></el-option>
                                <el-option label="否" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="注册号" prop="referenceNumber">
                            <el-input class="w-[280px]" v-model="formData.referenceNumber" />
                        </el-form-item>
                        <el-form-item label="指定颜色" prop="programmingLanguage">
                            <el-select v-model="formData.isPapernotice" class="w-[280px]" clearable>
                                <el-option label="黑白" value="" />
                                <el-option label="红色" value="" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否三维标志" prop="programmingLanguage">
                            <el-select v-model="formData.isPapernotice" class="w-[280px]" clearable>
                                <el-option label="是" value="" />
                                <el-option label="否" value="" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="初审公告期" prop="versionNumber">
                            <el-input class="w-[280px]" v-model="formData.versionNumber" />
                        </el-form-item>
                        <el-form-item label="初审公告日" prop="programmingLanguage">
                            <el-date-picker
                                class="flex-1 !flex"
                                placeholder="请选择"
                                v-model="formData.programmingLanguage"
                                type="datetime"
                                clearable
                                value-format="YYYY-MM-DD hh:mm:ss"
                            />
                        </el-form-item>
                        <el-form-item label="获批日" prop="homeLocation">
                            <el-date-picker
                                class="flex-1 !flex"
                                placeholder="请选择"
                                v-model="formData.homeLocation"
                                type="datetime"
                                clearable
                                value-format="YYYY-MM-DD hh:mm:ss"
                            />
                        </el-form-item>
                        <el-form-item label="申请日" prop="programmingLanguage">
                            <el-date-picker
                                class="flex-1 !flex"
                                placeholder="请选择"
                                v-model="formData.programmingLanguage"
                                type="datetime"
                                clearable
                                value-format="YYYY-MM-DD hh:mm:ss"
                            />
                        </el-form-item>
                        <el-form-item label="续展日" prop="softwareAbbreviation">
                            <el-date-picker
                                class="flex-1 !flex"
                                placeholder="请选择"
                                v-model="formData.softwareAbbreviation"
                                type="datetime"
                                clearable
                                value-format="YYYY-MM-DD hh:mm:ss"
                            />
                        </el-form-item>

                        <el-form-item label="终止日" prop="sourceQuantity">
                            <el-date-picker
                                class="flex-1 !flex"
                                placeholder="请选择"
                                v-model="formData.sourceQuantity"
                                type="datetime"
                                clearable
                                value-format="YYYY-MM-DD hh:mm:ss"
                            />
                        </el-form-item>

                        <el-form-item label="商标说明" prop="rest">
                            <el-input class="w-[280px]" v-model="formData.rest" type="textarea" />
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input class="w-[280px]" v-model="formData.remark" type="textarea" />
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="承办信息" name="second">
                    <el-form
                        ref="formRef"
                        :model="formData"
                        label-width="110px"
                        :rules="formRules"
                        :inline="true"
                    >
                        <el-form-item label="承办部门" prop="undertakingDepartment">
                            <el-select
                                class="flex-1 w-[280px]"
                                v-model="formData.undertakingDepartment"
                                placeholder="请选择承办部门"
                            >
                                <el-option label="流程部" value="2" />
                                <el-option label="销售部" value="1" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="处理人" prop="conductor">
                            <el-input
                                class="w-[280px]"
                                v-model="formData.conductor"
                                placeholder="请输入处理人"
                            />
                        </el-form-item>
                        <el-form-item label="所属分布" prop="ownershipDistribution">
                            <el-select
                                class="flex-1 w-[280px]"
                                v-model="formData.ownershipDistribution"
                                placeholder="请选择所属分布"
                            >
                                <el-option label="深圳" value="2" />
                                <el-option label="东莞" value="1" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否配案" prop="isStateCompensation">
                            <el-radio-group
                                v-model="formData.isStateCompensation"
                                placeholder="请选择是否配案"
                            >
                                <el-radio label="0">是</el-radio>
                                <el-radio label="1">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="处理事项" prop="handlingInformation">
                            <el-input
                                class="w-[280px]"
                                v-model="formData.handlingInformation"
                                placeholder="请输入处理事项"
                            />
                        </el-form-item>
                        <el-form-item label="马德里申请号" prop="softwareEnvironment">
                            <el-input class="w-[280px]" v-model="formData.softwareEnvironment" />
                        </el-form-item>
                        <el-form-item label="马德里申请语言" prop="sourceQuantity">
                            <el-input class="w-[280px]" v-model="formData.functionAndArt" />
                        </el-form-item>
                        <el-form-item label="马德里申请日" prop="programmingLanguage">
                            <el-date-picker
                                class="flex-1 !flex"
                                v-model="formData.programmingLanguage"
                                type="datetime"
                                clearable
                                value-format="YYYY-MM-DD hh:mm:ss"
                            />
                        </el-form-item>

                        <el-form-item label="马德里注册号" prop="functionAndArt">
                            <el-input class="w-[280px]" v-model="formData.functionAndArt" />
                        </el-form-item>
                        <el-form-item label="马德里注册日" prop="sourceQuantity">
                            <el-date-picker
                                class="flex-1 !flex"
                                v-model="formData.sourceQuantity"
                                type="datetime"
                                clearable
                                value-format="YYYY-MM-DD hh:mm:ss"
                            />
                        </el-form-item>

                        <el-form-item label="委托日期" prop="principalDates">
                            <el-date-picker
                                class="flex-1 !flex"
                                v-model="formData.principalDates"
                                type="datetime"
                                clearable
                                value-format="YYYY-MM-DD hh:mm:ss"
                                placeholder="请选择委托日期"
                            />
                        </el-form-item>
                        <el-form-item label="客户期限" prop="customerTerm">
                            <el-date-picker
                                class="flex-1 !flex"
                                v-model="formData.customerTerm"
                                type="datetime"
                                clearable
                                value-format="YYYY-MM-DD hh:mm:ss"
                                placeholder="请选择客户期限"
                            />
                        </el-form-item>
                        <el-form-item label="内部期限" prop="internalWearLife">
                            <el-date-picker
                                class="flex-1 !flex"
                                v-model="formData.internalWearLife"
                                type="datetime"
                                clearable
                                value-format="YYYY-MM-DD hh:mm:ss"
                                placeholder="请选择内部期限"
                            />
                        </el-form-item>
                        <el-form-item label="官方期限" prop="internalWearLife">
                            <el-date-picker
                                class="flex-1 !flex"
                                v-model="formData.internalWearLife"
                                type="datetime"
                                clearable
                                value-format="YYYY-MM-DD hh:mm:ss"
                                placeholder="请选择官方期限"
                            />
                        </el-form-item>

                        <el-form-item label="备注" prop="conductor">
                            <el-input
                                class="w-[280px]"
                                v-model="formData.conductor"
                                type="textarea"
                            />
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="商品" name="goods">
                    <el-button
                        v-perms="['basic:add']"
                        @click="AddMerchandise = true"
                        type="primary"
                        size="small"
                    >
                        添加商品
                    </el-button>
                    <el-table
                        class="mt-4"
                        size="large"
                        v-loading="pager.loading"
                        :data="pager.lists" stripe
                    >
                        <el-table-column type="selection" width="55" />
                        <el-table-column label="类别" prop="ourRef" min-width="100" />
                        <el-table-column label="商品名称" prop="relevantCaseName" min-width="80" />
                        <el-table-column label="英文名称" prop="correlationType" min-width="80" />
                        <el-table-column
                            label="第二外语"
                            prop="designatedCountry"
                            min-width="100"
                        />
                        <el-table-column label="商品编码" prop="putinType" min-width="100" />
                        <el-table-column label="操作" width="120" fixed="right">
                            <template #default="{ row }">
                                <el-button
                                    v-perms="['case:del']"
                                    type="danger"
                                    link
                                    @click="handleDelete(row.id)"
                                >
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="扩展信息" name="extend">
                    <el-collapse v-model="activeNames">
                        <el-collapse-item title="法律信息" name="1">
                            <el-form
                                ref="formRef"
                                :model="formData"
                                label-width="110px"
                                :rules="formRules"
                                :inline="true"
                            >
                                <el-form-item label="相对人名称" prop="caseName">
                                    <el-input v-model="formData.caseName" class="w-[300px]" />
                                </el-form-item>

                                <el-form-item label="相对人地址" prop="designatedCountry">
                                    <el-input
                                        v-model="formData.designatedCountry"
                                        class="w-[220px]"
                                    />
                                </el-form-item>
                                <el-form-item label="相对人代理机构" prop="customerDocumentNumber">
                                    <el-input
                                        class="w-[300px]"
                                        v-model="formData.customerDocumentNumber"
                                    />
                                </el-form-item>
                                <el-form-item label="主张法条" prop="caseFlow">
                                    <el-select
                                        class="flex-1"
                                        v-model="formData.caseFlow"
                                        placeholder="请选择"
                                    >
                                        <el-option label="第一条" value="1" />
                                        <el-option label="第二条" value="2" />
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="适用法条" prop="proposalForm">
                                    <el-select
                                        class="flex-1 w-[300px]"
                                        v-model="formData.isMaterials"
                                        placeholder="请选择"
                                    >
                                        <el-option label="第一条" value="1" />
                                        <el-option label="第二条" value="2" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="裁决结果" prop="businessType">
                                    <el-select
                                        class="flex-1"
                                        v-model="formData.businessType"
                                        placeholder="请选择"
                                    >
                                        <el-option label="赢" value="1" />
                                        <el-option label="输" value="2" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="主张法条备注" prop="conductor">
                                    <el-input
                                        class="w-[300px]"
                                        v-model="formData.conductor"
                                        type="textarea"
                                    />
                                </el-form-item>
                                <el-form-item label="适用法条备注" prop="conductor">
                                    <el-input
                                        class="w-[300px]"
                                        v-model="formData.conductor"
                                        type="textarea"
                                    />
                                </el-form-item>
                                <el-form-item label="裁决结果备注" prop="conductor">
                                    <el-input
                                        class="w-[300px]"
                                        v-model="formData.conductor"
                                        type="textarea"
                                    />
                                </el-form-item>
                            </el-form>
                        </el-collapse-item>
                        <el-collapse-item name="2">
                            <template #title>
                                引证信息
                                <el-button
                                    v-perms="['basic:add']"
                                    type="primary"
                                    style="margin: 0px 10px"
                                    size="small"
                                    @click.stop="documentingInformation = true"
                                >
                                    添加
                                </el-button>
                            </template>
                            <el-table
                                class="mt-4"
                                size="large"
                                v-loading="pager.loading"
                                :data="pager.lists" stripe
                            >
                                <el-table-column label="商标名称" prop="ourRef" min-width="100" />
                                <el-table-column
                                    label="申请号"
                                    prop="relevantCaseName"
                                    min-width="80"
                                />
                                <el-table-column
                                    label="注册号"
                                    prop="correlationType"
                                    min-width="80"
                                />
                                <el-table-column
                                    label="商标组别及商品"
                                    prop="designatedCountry"
                                    min-width="100"
                                />
                                <el-table-column label="操作" width="120" fixed="right">
                                    <template #default="{ row }">
                                        <el-button type="danger" link @click="handleDelete(row.id)">
                                            编辑
                                        </el-button>
                                        <el-button
                                            v-perms="['case:del']"
                                            type="danger"
                                            link
                                            @click="handleDelete(row.id)"
                                        >
                                            删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-collapse-item>
                        <el-collapse-item name="3">
                            <template #title>
                                指定国
                                <el-button
                                    v-perms="['basic:add']"
                                    style="margin: 0px 10px"
                                    type="primary"
                                    size="small"
                                    @click.stop="DesignatedStates = true"
                                >
                                    添加
                                </el-button>
                                <el-button
                                    v-perms="['basic:add']"
                                    style="margin: 0px 10px"
                                    @click.stop="dialogDerive = true"
                                    type="primary"
                                    size="small"
                                >
                                    导出
                                </el-button>
                            </template>
                            <el-table
                                class="mt-4"
                                size="large"
                                v-loading="pager.loading"
                                :data="pager.lists" stripe
                            >
                                <el-table-column label="指定国" prop="ourRef" min-width="100" />
                                <el-table-column
                                    label="限定类别"
                                    prop="relevantCaseName"
                                    min-width="80"
                                />
                                <el-table-column
                                    label="限定商品名称（英）"
                                    prop="correlationType"
                                    min-width="150"
                                />
                                <el-table-column
                                    label="限定商品名称（中）"
                                    prop="designatedCountry"
                                    min-width="150"
                                />
                                <el-table-column label="备注" prop="putinType" min-width="100" />
                                <el-table-column label="操作" width="120" fixed="right">
                                    <template #default="{ row }">
                                        <el-button type="danger" link @click="handleDelete(row.id)">
                                            编辑
                                        </el-button>
                                        <el-button
                                            v-perms="['case:del']"
                                            type="danger"
                                            link
                                            @click="handleDelete(row.id)"
                                        >
                                            删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-collapse-item>
                    </el-collapse>
                </el-tab-pane>
                <el-tab-pane label="费用信息" name="third">
                    <div style="display: flex; justify-content: space-between">
                      <div style="display: flex">
                        <div style="font-weight: bold; color: #000; padding: 0px 20px">
                          代理费列表
                        </div>
                        <el-button
                            v-perms="['basic:add']"
                            type="primary"
                            size="small"
                            @click="dialogFormVisible = true"
                        >
                          <template #icon>
                            <icon name="el-icon-Plus"/>
                          </template>
                          新增
                        </el-button>
                      </div>
                        <div style="padding: 0px 20px">
                            代理费：0 官费：0 第三方费用费：0汇总：0
                        </div>
                    </div>
                    <div style="padding: 0px 10px">
                        <el-radio-group v-model="isState">
                            <el-radio label="0">自定义</el-radio>
                            <el-radio label="1">统包</el-radio>
                            <el-radio label="2">按项</el-radio>
                        </el-radio-group>
                    </div>
                    <el-table class="mt-4" size="large" stripe>
                        <el-table-column type="selection" width="55" />
                        <el-table-column label="费用类型" min-width="100" />
                        <el-table-column label="币别" min-width="100" />
                        <el-table-column label="金额" min-width="100" />
                        <el-table-column label="账单号" min-width="100" />
                        <el-table-column label="账单日" min-width="100" />
                        <el-table-column label="应付日期" min-width="100" />
                        <el-table-column label="实付日期" min-width="100" />
                        <el-table-column label="收款方" min-width="100" />
                    </el-table>
                    <div style="display: flex; justify-content: start; padding: 20px 0px">
                        <div style="font-weight: bold; color: #000; padding: 0px 20px">
                            官费列表
                        </div>
                        <el-button
                            v-perms="['basic:add']"
                            type="primary"
                            size="small"
                            @click="OptionalOfficialFee = true"
                        >
                            选择官费
                        </el-button>
                    </div>
                    <el-table class="mt-4" size="large" stripe>
                        <el-table-column type="selection" width="55" />
                        <el-table-column label="费用名称" min-width="100" />
                        <el-table-column label="费用类型" min-width="100" />
                        <el-table-column label="币别" min-width="100" />
                        <el-table-column label="金额" min-width="100" />
                        <el-table-column label="数量" min-width="100" />
                        <el-table-column label="实际币别" min-width="100" />
                        <el-table-column label="实际金额" min-width="100" />
                        <el-table-column label="应收日期" min-width="100" />
                        <el-table-column label="实收日期" min-width="100" />
                        <el-table-column label="官费期限" min-width="100" />
                        <el-table-column label="实付日期" min-width="100" />
                    </el-table>
                    <div style="display: flex; justify-content: start; padding: 20px 0px">
                        <div style="font-weight: bold; color: #000; padding: 0px 20px">
                            第三方费用支付
                        </div>
                        <el-button
                            v-perms="['basic:add']"
                            type="primary"
                            size="small"
                            @click="dialogFormVisible = true"
                        >
                            <template #icon>
                                <icon name="el-icon-Plus" />
                            </template>
                            新增
                        </el-button>
                    </div>
                    <div style="padding: 0px 10px">
                        <el-radio-group v-model="isStateCompensation">
                            <el-radio label="0">自定义</el-radio>
                            <el-radio label="1">按额</el-radio>
                        </el-radio-group>
                    </div>
                    <el-table class="mt-4" size="large" stripe>
                        <el-table-column label="费用类型" min-width="100" />
                        <el-table-column label="币别" min-width="100" />
                        <el-table-column label="金额" min-width="100" />
                        <el-table-column label="账单号" min-width="100" />
                        <el-table-column label="账单日" min-width="100" />
                        <el-table-column label="应付日期" min-width="100" />
                        <el-table-column label="实付日期" min-width="100" />
                        <el-table-column label="收款方" min-width="100" />
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="优先权信息" name="six">
                    <el-form
                        ref="formRef"
                        :model="formData"
                        label-width="150px"
                        :rules="formRules"
                        :inline="true"
                    >
                        <el-form-item label="优先权号">
                            <el-input
                                class="w-[280px]"
                                v-model="formData.remark"
                                placeholder="请输入优先权号"
                            />
                        </el-form-item>
                        <el-form-item label="优先权地区" prop="aprogrammingLanguage">
                            <el-select
                                v-model="formData.aprogrammingLanguage"
                                class="w-[215px]"
                                clearable
                            >
                                <el-option label="中国" value="1" />
                                <el-option label="法国" value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="接入码">
                            <el-input class="w-[280px]" v-model="formData.remark" />
                        </el-form-item>
                        <el-form-item label="优先权申请人">
                            <el-input class="w-[215px]" v-model="formData.remark" />
                        </el-form-item>
                        <el-form-item label="我方文号">
                            <el-input class="w-[280px]" v-model="formData.remark" />
                        </el-form-item>
                        <el-form-item label="申请类型" prop="aprogrammingLanguage">
                            <el-select
                                v-model="formData.aprogrammingLanguage"
                                class="w-[215px]"
                                clearable
                            >
                                <el-option label="发明" value="1" />
                                <el-option label="植物" value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="优先权日" prop="developmentCompletionDate">
                            <el-date-picker
                                class="flex-1 !flex"
                                v-model="formData.programmingLanguage"
                                type="datetime"
                                clearable
                                value-format="YYYY-MM-DD hh:mm:ss"
                            />
                        </el-form-item>
                    </el-form>
                    <el-button v-perms="['basic:add']" type="primary" size="small">
                        添加优先权
                    </el-button>
                    <el-button
                        v-perms="['basic:add']"
                        @click="SelectionApplication = true"
                        type="primary"
                        size="small"
                    >
                        选择在先申请案
                    </el-button>
                    <el-table class="mt-4" size="large">
                        <el-table-column label="优先权号" min-width="100" />
                        <el-table-column label="优先权地区" min-width="120" />
                        <el-table-column label="优先权日" min-width="100" />
                        <el-table-column label="接入码" min-width="100" />
                        <el-table-column label="优先权申请人" min-width="120" />
                        <el-table-column label="我方文号" min-width="100" />
                        <el-table-column label="申请类型" min-width="100" />
                        <el-table-column label="操作" width="120" fixed="right">
                            <template #default="{ row }">
                                <el-button
                                    v-perms="['case:del']"
                                    type="danger"
                                    link
                                    @click="handleDelete(row.id)"
                                >
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="国内基础案" name="base">
                    <el-form
                        ref="formRef"
                        :model="formData"
                        label-width="150px"
                        :rules="formRules"
                        :inline="true"
                    >
                        <el-form-item label="申请号">
                            <el-input
                                class="w-[215px]"
                                v-model="formData.remark"
                                placeholder="请输入优先权号"
                            />
                        </el-form-item>
                        <el-form-item label="申请日" prop="developmentCompletionDate">
                            <el-date-picker
                                class="flex-1 !flex"
                                v-model="formData.programmingLanguage"
                                type="datetime"
                                clearable
                                value-format="YYYY-MM-DD hh:mm:ss"
                            />
                        </el-form-item>

                        <el-form-item label="注册号" prop="functionAndArt">
                            <el-input class="w-[215px]" v-model="formData.functionAndArt" />
                        </el-form-item>
                        <el-form-item label="注册日" prop="sourceQuantity">
                            <el-date-picker
                                class="flex-1 !flex"
                                v-model="formData.sourceQuantity"
                                type="datetime"
                                clearable
                                value-format="YYYY-MM-DD hh:mm:ss"
                            />
                        </el-form-item>
                        <el-form-item label="我方文号" prop="ourRef">
                            <el-input
                                v-model="formData.ourRef"
                                class="w-[215px]"
                                placeholder="系统自动生成"
                            />
                        </el-form-item>
                    </el-form>
                    <el-button v-perms="['basic:add']" type="primary" size="small">
                        添加
                    </el-button>
                    <el-button
                        v-perms="['basic:add']"
                        @click="Domesticbasiccase = true"
                        type="primary"
                        size="small"
                    >
                        选择
                    </el-button>
                    <el-table class="mt-4" size="large" stripe>
                        <el-table-column label="序号" min-width="100" />
                        <el-table-column label="申请号" min-width="120" />
                        <el-table-column label="申请日" min-width="100" />
                        <el-table-column label="注册号" min-width="100" />
                        <el-table-column label="注册日" min-width="120" />
                        <el-table-column label="我方文号" min-width="100" />
                        <el-table-column label="操作" width="120" fixed="right">
                            <template #default="{ row }">
                                <el-button
                                    v-perms="['case:del']"
                                    type="danger"
                                    link
                                    @click="handleDelete(row.id)"
                                >
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="相关案件" name="fourth">
                  <el-form
                      ref="formRef"
                      :model="formData"
                      label-width="150px"
                      :rules="formRules"
                      :inline="true"
                  >
                    <el-form-item label="相关类型" prop="correlationType">
                        <el-select
                            v-model="queryParams.correlationType"
                            class="w-[240px]"
                            clearable
                        >
                            <el-option label="家族案件" value="1" />
                            <el-option label="技术相关" value="2" />
                            <el-option label="同日申请" value="3" />
                            <el-option label="同日递交" value="4" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="添加相关" prop="ourRef">
                        <el-input class="w-[240px]" v-model="queryParams.ourRef" />
                    </el-form-item>
                  </el-form>
                    <el-table
                        class="mt-4"
                        size="large"
                        v-loading="pager.loading"
                        :data="pager.lists" stripe
                    >
                        <el-table-column label="我方文号" prop="ourRef" min-width="100" />
                        <el-table-column
                            label="相关案名称"
                            prop="relevantCaseName"
                            min-width="100"
                        />
                        <el-table-column label="相关类型" prop="correlationType" min-width="100" />
                        <el-table-column
                            label="国家（地区）"
                            prop="designatedCountry"
                            min-width="150"
                        />
                        <el-table-column label="申请类型" prop="putinType" min-width="100" />
                        <el-table-column label="案件状态" prop="caseStatus" min-width="100" />
                        <el-table-column label="操作" width="120" fixed="right">
                            <template #default="{ row }">
                                <el-button
                                    v-perms="['case:del']"
                                    type="danger"
                                    link
                                    @click="handleDelete(row.id)"
                                >
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="案件要求" name="seven">
                    <el-button
                        v-perms="['basic:add']"
                        type="primary"
                        @click="AddCaseRequest = true"
                        size="small"
                    >
                        添加案件要求
                    </el-button>
                    <el-table
                        class="mt-4"
                        size="large"
                        v-loading="pager.loading"
                        :data="pager.lists" stripe
                    >
                        <el-table-column label="附件名称" prop="ourRef" min-width="100" />
                        <el-table-column label="要求类型" prop="relevantCaseName" min-width="100" />
                        <el-table-column label="标题" prop="correlationType" min-width="100" />
                        <el-table-column label="描述" prop="designatedCountry" min-width="150" />

                        <el-table-column label="操作" width="120" fixed="right">
                            <template #default="{ row }">
                                <el-button
                                    v-perms="['case:del']"
                                    type="danger"
                                    link
                                    @click="handleDelete(row.id)"
                                >
                                    删除
                                </el-button>
                                <el-button link @click="handleDelete(row.id)"> 下载 </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="点数信息" name="fifth">
                    <el-button
                        v-perms="['basic:add']"
                        type="primary"
                        size="small"
                        @click="tally = true"
                    >
                        <template #icon>
                            <icon name="el-icon-Plus" />
                        </template>
                        新增
                    </el-button>
                    <el-table
                        class="mt-4"
                        size="large"
                        v-loading="pager.loading"
                        :data="pager.lists" stripe
                    >
                        <el-table-column label="共有人" prop="partOwner" min-width="100" />
                        <el-table-column label="办理事项" prop="todonote" min-width="100" />
                        <el-table-column label="办理日期" prop="manageDate" min-width="100" />
                        <el-table-column label="点数类型" prop="countType" min-width="100" />
                        <el-table-column label="点数数量" prop="numberOfPoints" min-width="100" />
                        <el-table-column
                            label="点数状态"
                            prop="addtotalstatepoint"
                            min-width="100"
                        />
                        <el-table-column label="操作" width="120" fixed="right">
                            <template #default="{ row }">
                                <el-button
                                    v-perms="['case:del']"
                                    type="danger"
                                    link
                                    @click="handleDelete(row.id)"
                                >
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="商标书式" name="brand">
                    <trademark-form></trademark-form>
                </el-tab-pane>
            </el-tabs>
            <el-dialog v-model="OptionalOfficialFee" title="选择官费" width="1200px">
                <el-form-item prop="addressChinese">
                    <el-input v-model="formData.caseName" style="width: 270px" />
                    <el-button type="primary"> 查询 </el-button>
                </el-form-item>

                <el-table class="mt-4" size="large">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="费用名称" min-width="100" />
                    <el-table-column label="费减类型" min-width="100" />
                    <el-table-column label="币别" min-width="100" />
                    <el-table-column label="金额" min-width="100" />
                    <el-table-column label="数量" min-width="100" />
                    <el-table-column label="实际币别" min-width="100" />
                    <el-table-column label="实际金额" min-width="100" />
                    <el-table-column label="应收日期" min-width="100" />
                    <el-table-column label="实收日期" min-width="100" />
                    <el-table-column label="官方期限" min-width="100" />
                    <el-table-column label="实付日期" min-width="100" />
                    <el-table-column label="操作" min-width="100">
                        <template #default="{ row }">
                            <el-button
                                v-perms="['case:del']"
                                type="danger"
                                link
                                @click="handleDelete(row.id)"
                            >
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
            <el-dialog v-model="dialogFormVisible" title="修改费用" width="1200px">
                <el-form
                    ref="formRef"
                    :model="formData"
                    label-width="100px"
                    :rules="formRules"
                    :inline="true"
                >
                    <el-form-item label="实收金额" prop="fundsReceived">
                        <el-input
                            class="w-[240px]"
                            v-model="formData.fundsReceived"
                            placeholder="请输入实收金额"
                        />
                    </el-form-item>
                    <el-form-item label="是否作废" prop="isInvalid">
                        <el-select
                            class="flex-1 w-[220px]"
                            v-model="formData.isInvalid"
                            placeholder="请选择是否作废"
                        >
                            <el-option label="是" value="1" />
                            <el-option label="否" value="2" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="实收日期" prop="paidupDate">
                        <el-date-picker
                            class="flex-1 !flex"
                            v-model="formData.paidupDate"
                            type="datetime"
                            clearable
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择实收日期"
                        />
                    </el-form-item>

                    <el-form-item label="请款单号" prop="paymentRequestNumber">
                        <el-input
                            class="w-[240px]"
                            v-model="formData.paymentRequestNumber"
                            placeholder="请输入请款单号"
                        />
                    </el-form-item>

                    <el-form-item label="发票号" prop="invoiceNumber">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.invoiceNumber"
                            placeholder="请输入发票号"
                        />
                    </el-form-item>
                    <el-form-item label="请款日期" prop="requestedDate">
                        <el-date-picker
                            class="flex-1 !flex"
                            v-model="formData.requestedDate"
                            type="datetime"
                            clearable
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择请款日期"
                        />
                    </el-form-item>
                    <el-form-item label="费用名称" prop="chargeName">
                        <el-input
                            class="w-[240px]"
                            v-model="formData.chargeName"
                            placeholder="请输入费用名称"
                        />
                    </el-form-item>
                    <el-form-item label="费用描述" prop="chargeDepict">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.chargeDepict"
                            placeholder="请输入费用描述"
                        />
                    </el-form-item>
                    <el-form-item label="应收日期" prop="accountsDate">
                        <el-date-picker
                            class="flex-1 !flex"
                            v-model="formData.accountsDate"
                            type="datetime"
                            clearable
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择应收日期"
                        />
                    </el-form-item>
                    <el-form-item label="费用描述英文" prop="chargeDepictfine">
                        <el-input
                            class="w-[240px]"
                            v-model="formData.chargeDepictfine"
                            placeholder="请输入费用描述英文"
                        />
                    </el-form-item>

                    <el-form-item label="应收金额" prop="extendedAmount">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.extendedAmount"
                            placeholder="请输入应收金额"
                        />
                    </el-form-item>
                    <el-form-item label="开票时间" prop="slt">
                        <el-date-picker
                            class="flex-1 !flex"
                            v-model="formData.slt"
                            type="datetime"
                            clearable
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择开票时间"
                        />
                    </el-form-item>
                    <el-form-item label="折扣率" prop="discountRate">
                        <el-input
                            class="w-[240px]"
                            v-model="formData.discountRate"
                            placeholder="请输入折扣率"
                        />
                    </el-form-item>

                    <el-form-item label="数量" prop="count">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.count"
                            placeholder="请输入数量"
                        />
                    </el-form-item>
                    <el-form-item label="外方账单日期" prop="externalBillingDate">
                        <el-date-picker
                            class="flex-1 !flex"
                            v-model="formData.externalBillingDate"
                            type="datetime"
                            clearable
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择外方账单日期"
                        />
                    </el-form-item>
                    <el-form-item label="汇率" prop="parities">
                        <el-input
                            class="w-[240px]"
                            v-model="formData.parities"
                            placeholder="请输入汇率"
                        />
                    </el-form-item>

                    <el-form-item label="收款公司账户" prop="collectingCompanyAccount">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.collectingCompanyAccount"
                            placeholder="请输入收款公司账户"
                        />
                    </el-form-item>

                    <el-form-item label="账户明细" prop="accountDetails">
                        <el-input
                            class="w-[280px]"
                            v-model="formData.accountDetails"
                            placeholder="请输入账户明细"
                        />
                    </el-form-item>
                    <el-form-item label="收款状态" prop="collectionStatus">
                        <el-select
                            class="flex-1 w-[240px]"
                            v-model="formData.collectionStatus"
                            placeholder="请选择收款状态"
                        >
                            <el-option label="是" value="1" />
                            <el-option label="否" value="2" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="外方账单号" prop="externalBillingNumber">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.externalBillingNumber"
                            placeholder="请输入外方账单号"
                        />
                    </el-form-item>

                    <el-form-item label="垫交状态" prop="beddingCondition">
                        <el-select
                            class="flex-1 w-[280px]"
                            v-model="formData.beddingCondition"
                            placeholder="请选择垫交状态"
                        >
                            <el-option label="已垫交" value="1" />
                            <el-option label="未垫交" value="2" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="垫交人" prop="handOver">
                        <el-input
                            class="w-[240px]"
                            v-model="formData.handOver"
                            placeholder="请输入垫交人"
                        />
                    </el-form-item>
                    <el-form-item label="税率" prop="paidupDate">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.handOver"
                            placeholder="请输入税率"
                        />
                    </el-form-item>
                    <el-form-item label="备注" prop="expenseNote">
                        <el-input
                            class="w-[280px]"
                            v-model="formData.expenseNote"
                            placeholder="请输入费用备注"
                        />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="dialogFormVisible = false">
                            保存
                        </el-button>
                    </div>
                </template>
            </el-dialog>
            <el-dialog v-model="tally" title="新增点数" width="900px">
                <el-form ref="formRef" :model="formData" label-width="100px" :rules="formRules" :inline="true">
                    <el-form-item label="点数用户" prop="click">
                        <el-input v-model="formData.click" placeholder="请输入点数用户" class="w-[280px]"/>
                    </el-form-item>
                    <el-form-item label="共有人" prop="partOwner">
                        <el-input v-model="formData.partOwner" placeholder="请输入共有人" class="w-[280px]" />
                    </el-form-item>
                    <el-form-item label="办理事项" prop="todonote">
                        <el-input v-model="formData.todonote" placeholder="请输入办理事项" class="w-[280px]" />
                    </el-form-item>
                    <el-form-item label="办理日期" prop="manageDate">
                        <el-date-picker
                            class="flex-1 !flex"
                            v-model="formData.manageDate"
                            style="width: 280px"
                            type="datetime"
                            clearable
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择办理日期"
                        />
                    </el-form-item>
                    <el-form-item label="点数类型" prop="countType">
                        <el-select
                            class="flex-1 w-[280px]"
                            v-model="formData.countType"
                            placeholder="请选择点数类型"
                        >
                            <el-option label="点数" value="" />
                            <el-option label="金额" value="" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="点数数量" prop="numberOfPoints">
                        <el-input v-model="formData.numberOfPoints" placeholder="请输入点数数量" class="w-[280px]" />
                    </el-form-item>
                    <el-form-item label="点数状态" prop="addtotalstatepoint">
                        <el-select
                            class="flex-1 w-[280px]"
                            v-model="formData.addtotalstatepoint"
                            placeholder="请选择点数状态"
                        >
                            <el-option label="办理中" value="" />
                            <el-option label="已完成" value="" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="提成日期" prop="royaltyDate">
                        <el-date-picker
                            class="flex-1 !flex"
                            v-model="formData.royaltyDate"
                            type="datetime"
                            style="width: 280px"
                            clearable
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择提成日期"
                        />
                    </el-form-item>
                    <el-form-item label="工作量点数" prop="workPoints">
                        <el-input v-model="formData.workPoints" placeholder="请输入工作量点数" class="w-[280px]" />
                    </el-form-item>
                    <el-form-item label="创建人员" prop="creator">
                        <el-input v-model="formData.creator" placeholder="请输入创建人员" class="w-[280px]" />
                    </el-form-item>
                    <el-form-item label="修改人员" prop="updateUserName">
                        <el-input
                            v-model="formData.updateUserName"
                            placeholder="请输入修改人名称" class="w-[280px]"
                        />
                    </el-form-item>
                </el-form>
                <div
                    style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 10px;
                    "
                >
                    <el-button v-perms="['basic:add']" type="primary"> 确定 </el-button>
                    <el-button type="primary"> 返回 </el-button>
                </div>
            </el-dialog>
            <el-dialog v-model="SelectionApplication" title="选择在先申请案" width="800px">
                <el-input
                    type="textarea"
                    placeholder="输入我方文号、客户文号、申请号查询，多个中间用分号；空格或者换行隔开，默认小于10条模糊查询，大于10条精确查询"
                ></el-input>
                <div
                    style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 10px;
                    "
                >
                    <el-button v-perms="['basic:add']" type="primary"> 查询 </el-button>
                </div>
                <el-table class="mt-4" size="large" v-loading="pager.loading" :data="pager.lists">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="我方文号" prop="ourRef" min-width="100" />
                    <el-table-column label="申请号" prop="relevantCaseName" min-width="80" />
                    <el-table-column label="申请日" prop="correlationType" min-width="80" />
                    <el-table-column label="申请地区" prop="designatedCountry" min-width="100" />
                    <el-table-column label="申请类型" prop="putinType" min-width="100" />
                    <el-table-column label="案件状态" prop="caseStatus" min-width="100" />
                    <el-table-column label="优先权状态" prop="caseStatus" min-width="100" />
                </el-table>
                <div
                    style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 10px;
                    "
                >
                    <el-button v-perms="['basic:add']" type="primary"> 确定 </el-button>
                </div>
            </el-dialog>
            <el-dialog v-model="AddCaseRequest" title="案件要求">
                <el-form ref="formRef" :model="formData" label-width="100px" :rules="formRules">
                    <el-form-item label="要求类型" prop="fundsReceived">
                        <el-select class="flex-1" v-model="formData.countType" placeholder="请选择">
                            <el-option label="看稿要求" value="0" />
                            <el-option label="费用要求" value="1" />
                            <el-option label="其他要求" value="2" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="案件流向" prop="fundsReceived">
                        <el-select class="flex-1" v-model="formData.brandType" placeholder="请选择">
                            <el-option label="内-内" value="0" />
                            <el-option label="外-外" value="1" />
                            <el-option label="内-外" value="2" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="标题" prop="click">
                        <el-input v-model="formData.click" />
                    </el-form-item>
                    <el-form-item label="描述" prop="click">
                        <editor v-model="state.value2" height="500px" mode="simple" />
                    </el-form-item>
                </el-form>
                <div
                    style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 10px;
                    "
                >
                    <el-button v-perms="['basic:add']" type="primary"> 确定 </el-button>
                    <el-button type="primary"> 返回 </el-button>
                </div>
            </el-dialog>
            <el-dialog v-model="Domesticbasiccase" title="选择">
                <el-form-item>
                    <el-input class="w-[215px]" placeholder="输入文号，申请号查询"></el-input>
                    <el-button v-perms="['basic:add']" type="primary"> 查询 </el-button>
                </el-form-item>
                <el-table class="mt-4" size="large" stripe>
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="我方文号" min-width="100" />
                    <el-table-column label="申请号" min-width="120" />
                    <el-table-column label="申请日" min-width="100" />
                    <el-table-column label="注册号" min-width="100" />
                    <el-table-column label="注册日" min-width="120" />
                </el-table>
                <div
                    style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 10px;
                    "
                >
                    <el-button v-perms="['basic:add']" type="primary"> 确定 </el-button>
                </div>
            </el-dialog>
            <el-dialog v-model="AddMerchandise" title="添加商品" width="1200px">
                <div class="addMc">
                    <div style="border-right: 1px solid #f2f2f2">
                        <el-table
                            class="mt-4"
                            size="large"
                            v-loading="pager.loading"
                            :data="pager.lists" stripe
                        >
                            <el-table-column label="序号" prop="ourRef" min-width="60" />
                            <el-table-column label="中文" prop="relevantCaseName" min-width="60" />
                            <el-table-column label="英文" prop="correlationType" min-width="60" />
                            <el-table-column
                                label="第二外语"
                                prop="designatedCountry"
                                min-width="100"
                            />
                            <el-table-column label="群组" prop="putinType" min-width="60" />
                            <el-table-column label="编号" prop="putinType" min-width="60" />
                            <el-table-column label="商标类别" prop="putinType" min-width="100" />
                            <el-table-column label="操作" width="100" fixed="right">
                                <template #default="{ row }">
                                    <el-button
                                        v-perms="['case:del']"
                                        type="danger"
                                        link
                                        @click="handleDelete(row.id)"
                                    >
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div style="margin-top: 20px">
                            <el-form :inline="true" label-width="125px">
                                <el-form-item label="名称" prop="caseName">
                                    <el-input
                                        v-model="formData.caseName"
                                        class="w-[120px]"
                                        size="small"
                                    />
                                    <span style="color: #409eff;margin-left: 20px">中转英</span>
                                </el-form-item>
                                <el-form-item label="英文" prop="caseName">
                                    <el-input
                                        v-model="formData.caseName"
                                        class="w-[120px]"
                                        size="small"
                                    />
                                    <span style="color: #409eff;margin-left: 20px">英转中</span>
                                </el-form-item>
                                <el-form-item label="第二外语" prop="designatedCountry">
                                    <el-input
                                        v-model="formData.designatedCountry"
                                        class="w-[180px]"
                                        size="small"
                                    />
                                </el-form-item>
                                <el-form-item label="编号" prop="customerDocumentNumber">
                                    <el-input
                                        class="w-[180px]"
                                        v-model="formData.customerDocumentNumber"
                                        size="small"
                                    />
                                </el-form-item>
                            </el-form>

                            <div class="but_center">
                                <el-button v-perms="['basic:add']" type="primary" size="small">
                                    保存
                                </el-button>
                            </div>
                        </div>
                    </div>
                    <div style="padding: 0px 5px; width: 800px;margin-left: 10px">
                        <el-tabs v-model="addgoods">
                            <el-tab-pane label="录入" name="input">
                                <el-form-item label="商标类别" prop="caseFlow" label-width="80px">
                                    <el-select
                                        class="flex-1 w-[180px]"
                                        size="small"
                                        v-model="formData.caseFlow"
                                        placeholder="请选择"
                                    >
                                        <el-option label="All" value="1" />
                                        <el-option label="1" value="2" />
                                    </el-select>
                                    <el-button v-perms="['basic:add']" type="primary" size="small">
                                        添加
                                    </el-button>
                                </el-form-item>
                              <div style="display: flex;flex-direction: column;margin-bottom: 10px">
                                  <el-form-item prop="caseFlow">
                                      <el-input
                                          v-model="formData.click"
                                          :autosize="{ minRows: 2, maxRows: 5 }"
                                          placeholder="请直接填写商品名称,中文英文之间用|隔开,多个之间用;隔开,例:1中文|1英文;2中文|2英文"
                                          type="textarea"
                                      />
                                  </el-form-item>
                                <div style="margin-left: auto">
                                  <el-button v-perms="['basic:add']" type="primary" size="small">
                                      中转英
                                  </el-button>
                                </div>
                              </div>
                              <div style="display: flex;flex-direction: column;">
                                <el-form-item prop="caseFlow">
                                    <el-input
                                        v-model="formData.click"
                                        placeholder="请直接填写英文商品名称,名称之间用;隔开,例:1英文;2英文"
                                        :autosize="{ minRows: 2, maxRows: 5 }"
                                        type="textarea"
                                    />
                                </el-form-item>
                                <div style="margin-left: auto">
                                    <el-button v-perms="['basic:add']" type="primary" size="small">
                                      英转中
                                    </el-button>
                                </div>
                              </div>
                            </el-tab-pane>
                            <el-tab-pane label="查询" name="select">
                                <div>
                                    <el-form-item label="商标类别" prop="caseName">
                                        <el-input
                                            v-model="formData.caseName"
                                            class="w-[115px]"
                                            size="small"
                                        />
                                    </el-form-item>
                                    <el-form-item label="相似群组" prop="caseName">
                                        <el-input
                                            v-model="formData.caseName"
                                            class="w-[115px]"
                                            size="small"
                                        />
                                    </el-form-item>
                                    <el-form-item label="中/英文名称/编号" prop="designatedCountry">
                                        <el-input
                                            v-model="formData.designatedCountry"
                                            class="w-[115px]"
                                            size="small"
                                        />
                                    </el-form-item>
                                  <div style="display: flex;justify-content: center">
                                      <el-button v-perms="['basic:add']" type="primary" size="small">
                                          查询
                                      </el-button>
                                  </div>
                                </div>
                                <el-table
                                    class="mt-4"
                                    size="large"
                                    v-loading="pager.loading"
                                    :data="pager.lists"
                                >
                                    <el-table-column type="selection" width="50" />
                                    <el-table-column
                                        label="中文"
                                        prop="relevantCaseName"
                                        min-width="60"
                                    />
                                    <el-table-column
                                        label="英文"
                                        prop="correlationType"
                                        min-width="60"
                                    />
                                    <el-table-column
                                        label="第二外语"
                                        prop="designatedCountry"
                                        min-width="100"
                                    />
                                    <el-table-column label="群组" prop="putinType" min-width="60" />
                                    <el-table-column label="编号" prop="putinType" min-width="60" />
                                </el-table>
                                <div class="but_center">
                                    <el-button v-perms="['basic:add']" type="primary" size="small">
                                        添加
                                    </el-button>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="拷贝" name="copy">
                                <el-input placeholder="输入案号查询" />
                                <el-table
                                    class="mt-4"
                                    size="large"
                                    v-loading="pager.loading"
                                    :data="pager.lists"
                                >
                                    <el-table-column type="selection" width="55" />
                                    <el-table-column
                                        label="中文"
                                        prop="relevantCaseName"
                                        min-width="80"
                                    />
                                    <el-table-column
                                        label="英文"
                                        prop="correlationType"
                                        min-width="80"
                                    />
                                    <el-table-column
                                        label="编号"
                                        prop="putinType"
                                        min-width="100"
                                    />
                                </el-table>
                                <div class="but_center">
                                    <el-button v-perms="['basic:add']" type="primary" size="small">
                                        拷贝
                                    </el-button>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </el-dialog>
            <el-dialog v-model="documentingInformation" title="添加-引证信息">
                <el-form ref="formRef" :model="formData" label-width="150px" :rules="formRules" :inline="true">
                    <el-form-item label="商标名称" prop="caseName">
                        <el-input v-model="formData.caseName" class="w-[215px]" />
                    </el-form-item>
                    <el-form-item label="申请号" prop="softwareEnvironment">
                        <el-input class="w-[215px]" v-model="formData.softwareEnvironment" />
                    </el-form-item>
                    <el-form-item label="注册号" prop="referenceNumber">
                        <el-input class="w-[215px]" v-model="formData.referenceNumber" />
                    </el-form-item>
                    <el-form-item label="商标组别及商品" prop="conductor">
                        <el-input class="w-[215px]" v-model="formData.conductor" type="textarea" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="documentingInformation = false">取消</el-button>
                        <el-button type="primary" @click="documentingInformation = false">
                            保存
                        </el-button>
                    </div>
                </template>
            </el-dialog>
            <el-dialog v-model="DesignatedStates" title="添加-指定国">
                <el-form ref="formRef" :model="formData" label-width="150px" :rules="formRules" :inline="true">
                    <el-form-item label="指定国" prop="conductor">
                        <el-input class="w-[215px]" v-model="formData.conductor" type="textarea" />
                    </el-form-item>
                    <el-form-item label="限定类别" prop="putinType">
                        <el-input class="w-[215px]" v-model="formData.caseName" />
                    </el-form-item>
                    <el-form-item label="限定商品名称（中）" prop="correlationType">
                        <el-input class="w-[215px]" v-model="formData.handlingInformation" />
                    </el-form-item>
                    <el-form-item label="限定商品名称（英）" prop="softwareEnvironment">
                        <el-input class="w-[215px]" v-model="formData.softwareEnvironment" />
                    </el-form-item>
                    <el-form-item label="申请号" prop="softwareEnvironment">
                        <el-input class="w-[215px]" v-model="formData.softwareEnvironment" />
                    </el-form-item>
                    <el-form-item label="申请日" prop="programmingLanguage">
                        <el-date-picker
                            class="flex-1 !flex"
                            style="width: 215px"
                            v-model="formData.programmingLanguage"
                            type="datetime"
                            clearable
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择申请日"
                        />
                    </el-form-item>
                    <el-form-item label="注册号" prop="referenceNumber">
                        <el-input class="w-[215px]" v-model="formData.referenceNumber" />
                    </el-form-item>
                    <el-form-item label="注册日" prop="sourceQuantity">
                        <el-date-picker
                            class="flex-1 !flex"
                            style="width: 215px"
                            v-model="formData.sourceQuantity"
                            type="datetime"
                            clearable
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择注册日"
                        />
                    </el-form-item>
                    <el-form-item label="续展日" prop="internalWearLife">
                        <el-date-picker
                            class="flex-1 !flex"
                            style="width: 215px"
                            v-model="formData.internalWearLife"
                            type="datetime"
                            clearable
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择续展日"
                        />
                    </el-form-item>
                    <el-form-item label="备注" prop="functionAndArt">
                        <el-input class="w-[215px]" v-model="formData.functionAndArt" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="DesignatedStates = false">取消</el-button>
                        <el-button type="primary" @click="DesignatedStates = false">
                            保存
                        </el-button>
                    </div>
                </template>
            </el-dialog>
            <el-dialog v-model="dialogDerive" title="导出清单">
                <el-form-item label="基本信息" prop="caseType">
                    <el-checkbox-group class="w-[740px]" v-model="copytype" placeholder="基本信息">
                        <el-checkbox label="指定国" value="1"></el-checkbox>
                        <el-checkbox label="限定类别" value="2"></el-checkbox>
                        <el-checkbox label="限定商品名称（中）" value="3"></el-checkbox>
                        <el-checkbox label="限定商品名称（英）" value="4"></el-checkbox>
                        <el-checkbox label="申请号" value="5"></el-checkbox>
                        <el-checkbox label="申请日" value="6"></el-checkbox>
                        <el-checkbox label="注册号" value="7"></el-checkbox>
                        <el-checkbox label="注册日" value="8"></el-checkbox>
                        <el-checkbox label="续展日" value="9"></el-checkbox>
                        <el-checkbox label="备注" value="10"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogDerive = false">取消</el-button>
                        <el-button type="primary" @click="dialogDerive = false"> 导出 </el-button>
                    </div>
                </template>
            </el-dialog>
        </popup>
    </div>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import { caseEdit, caseAdd, caseDetail, caseLists, caseDelete } from '@/api/case'
import Popup from '@/components/popup/index.vue'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import type { PropType } from 'vue'
import trademarkForm from './trademarkForm.vue'

const copytype = ref()
const isState = ref('')
const activeNames = ref(['1'])
const isStateCompensation = ref('')
const activeName = 'first'
const addgoods = 'input'
const dialogFormVisible = ref(false)
const tally = ref(false)
const OptionalOfficialFee = ref(false)
const SelectionApplication = ref(false)
const AddCaseRequest = ref(false)
const Domesticbasiccase = ref(false)
const AddMerchandise = ref(false)
const documentingInformation = ref(false)
const DesignatedStates = ref(false)
const dialogDerive = ref(false)
const state = reactive({
    value1: '',
    value2: ''
})
const queryParams = reactive({
    correlationType: '',
    correlationTypeid: '',
    ourRef: ''
})

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: caseLists,
    params: queryParams
})

defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})
const handleDelete = async (id: number) => {
    await feedback.confirm('确定要删除？')
    await caseDelete({ id })
    feedback.msgSuccess('删除成功')
    getLists()
}
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑新建合同案件信息' : '案件信息'
})

const formData = reactive({
    rest: '',
    externalBillingDateStart: '',
    externalBillingDateEnd: '',
    aprogrammingLanguage: '',
    aisPapernotice: '',
    cfunctionAndArt: '',
    vfunctionAndArt: '',
    dfunctionAndArt: '',
    caseName: '',
    caseType: '',
    businessType: '',
    putinType: '',
    undertakingDepartment: '',
    conductor: '',
    taxRate: '',
    costType: '',
    cost: '',
    contributionPool: '',
    ownershipDistribution: '',
    haveCase: '',
    designatedCountry: '',
    brandType: '',
    classQuantity: '',
    quantity: '',
    officialFee: '',
    agencyFee: '',
    hirdPartyPayment: '',
    signedAmount: '',
    invoiceValue: '',
    fundsReceived: '',
    paidupDate: '',
    planNumber: '',
    caseStatus: '',
    caseLink: '',
    remark: '',
    caseNameid: '',
    businessTypeid: '',
    undertakingDepartmentid: '',
    ownershipDistributionid: '',
    costTypeid: '',
    correlationTypeid: '',
    isRegister: '',
    isInvalid: '',
    isExistingcase: '',
    isPapernotice: '',
    customerDocumentNumber: '',
    copyrightType: '',
    caseFlow: '',
    countryOfOrigin: '',
    agency: '',
    proposalForm: '',
    isMaterials: '',
    isFund: '',
    initialPeriod: '',
    referenceNumber: '',
    contractNumber: '',
    budget: '',
    author: '',
    homeLocation: '',
    softwareAbbreviation: '',
    versionNumber: '',
    softwareWorkDescription: '',
    developmentCompletionDate: '',
    publishedStatus: '',
    hardwareEnvironment: '',
    softwareEnvironment: '',
    programmingLanguage: '',
    sourceQuantity: '',
    functionAndArt: '',
    handlingInformation: '',
    principalDates: '',
    customerTerm: '',
    internalWearLife: '',
    isStateCompensation: '',
    click: '',
    partOwner: '',
    todonote: '',
    manageDate: '',
    countType: '',
    numberOfPoints: '',
    addtotalstatepoint: '',
    royaltyDate: '',
    workPoints: '',
    creator: '',
    chargeType: '',
    currency: '',
    sum: '',
    advancePaymentDate: '',
    paymentRequestNumber: '',
    requestedDate: '',
    accountsDate: '',
    invoiceNumber: '',
    chargeName: '',
    chargeDepict: '',
    chargeDepictfine: '',
    extendedAmount: '',
    discountRate: '',
    count: '',
    parities: '',
    collectingCompanyAccount: '',
    collectionStatus: '',
    accountDetails: '',
    slt: '',
    externalBillingNumber: '',
    externalBillingDate: '',
    beddingCondition: '',
    handOver: '',
    expenseNote: '',
    reductionType: '',
    actualCurrency: '',
    officialDeadline: '',
    ourRef: '',
    relevantCaseName: '',
    correlationType: '',
    userId: '',
    userName: '',
    id: '',
    updateUserId: '',
    updateUserName: ''
})

const formRules = {
    caseName: [
        {
            required: true,
            message: '请输入',
            trigger: ['blur']
        }
    ],
    businessType: [
        {
            required: true,
            message: '请选择',
            trigger: ['blur']
        }
    ],
    undertakingDepartment: [
        {
            required: true,
            message: '请选择',
            trigger: ['blur']
        }
    ],
    designatedCountry: [
        {
            required: true,
            message: '请输入',
            trigger: ['blur']
        }
    ],
    handlingInformation: [
        {
            required: true,
            message: '请输入',
            trigger: ['blur']
        }
    ],
    id: [
        {
            required: true,
            message: '请输入',
            trigger: ['blur']
        }
    ]
}

const handleSubmit = async () => {
    await formRef.value?.validate()
    const data: any = { ...formData }
    mode.value == 'edit' ? await caseEdit(data) : await caseAdd(data)
    popupRef.value?.close()
    feedback.msgSuccess('操作成功')
    emit('success')
}

const open = (type = 'add') => {
    mode.value = type
    popupRef.value?.open()
}

const setFormData = async (data: Record<string, any>) => {
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }
}

const getDetail = async (row: Record<string, any>) => {
    const data = await caseDetail({
        id: row.id
    })
    setFormData(data)
}

const handleClose = () => {
    emit('close')
}

defineExpose({
    open,
    setFormData,
    getDetail
})
</script>
<style scoped>
.addMc {
    display: flex;
    justify-content: space-around;
    border: 1px solid #f2f2f2;
}

.but_center {
    display: flex;
    justify-content: center;
    padding: 10px 0px;
}
</style>
